<template>
  <div class="story">
    <StoryTitle :storyInfo="storyList.story_info"/> 
    <StoryList :storyList="storyList.chapter_list" :author="author" :price='price' />
     <transition name="scrollY">
      <router-view />
    </transition>
  </div>
</template>

<script>
import { debounce } from "lodash-es";
import StoryTitle from "../StoryView/StoryTitle.vue";
import StoryList from '../StoryView/StoryList.vue';
export default {
  components: { StoryTitle, StoryList },
  data() {
    return {
      id: 0,
      storyList: {},
      author:null,
      price:0,

    };
  },
  props: {
    storyId: Number,
    
  },
  created() {
    this.getData = debounce(this.getData);
  },
  mounted() {
    this.getData();
  },

  methods: {
    getData() {
      // console.log(JSON.parse(localStorage.storyList));
      this.id = JSON.parse(sessionStorage.storyList).id;
      this.$axios
        .get(`http://new.puncheers.com/api/v2/chapter_list?story_id=${this.id}`)
        .then(({ data }) => {
          // console.log(data.data,this.id);
          this.storyList = data.data;
          this.author=this.storyList.story_info.username
          this.price=this.storyList.story_info.price
          // console.log(data.data);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.story {
  position: fixed;
  top: 6%;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: white;
  z-index: 999;
}
.scrollY-enter,
.scrollY-leave-to {
  left: 0;
  top: 0;
  right: 0;
  position: absolute;
  transform: translateY(100%);
  opacity: 0;
}
.scrollY-enter-active {
  transition: all 0.9s ease;
}
.scrollY-leave{
  transform: translateY(-100%);
  opacity: 1;
}
.scrollY-enter-to {
 transform: translateY(0);
 opacity: 1;
}
.scrollY-leave-active {
  transition: all 0.9s ease;
  
  z-index: 100;
}
</style>